<template>
	<div class="card">
		<div style="width: 800px; margin: auto">
			<el-form :model="registerData" label-width="100px" :rules="rules" ref="ruleFormRef">
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="registerData.password" show-password clearable placeholder="请输入密码" />
				</el-form-item>
				<el-form-item label="" align="center" style="height: 25px">
					<inputStrength :password="registerData.password"></inputStrength
				></el-form-item>

				<el-button @click="submitForm(ruleFormRef)">提交</el-button>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts" name="qrcode">
import { ref, reactive } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { checkPasswordRule } from '@/utils/util'

import inputStrength from '@/components/inputStrength/index.vue'
// 密码校验规则
const validatePassword = (rule: any, value: string, callback: any) => {
	if (value === '') {
		callback(new Error('请输入密码'))
	} else {
		let name: string = ''
		if (registerData.username === '') {
			name = '空'
		} else {
			name = registerData.username
		}
		const result: string = checkPasswordRule(value, name)
		if (result === 'success') {
			callback()
		} else {
			callback(new Error(result))
		}
	}
}

const ruleFormRef = ref<FormInstance>()
// 注册表单校验规则
const rules = reactive({
	password: [{ validator: validatePassword, trigger: 'blur' }]
})
// 注册数据
const registerData = reactive({
	password: '',
	username: ''
})

// 提交校验方法
const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate(valid => {
		if (valid) {
			console.log('submit!')
			ElMessage({
				message: '注册成功！',
				type: 'success'
			})
		} else {
			console.log('error submit!')
			return false
		}
	})
}
</script>

<style scoped lang="scss">
.strength {
	position: relative;
	top: 5px;
	left: 0;
	font-size: 13px;
	color: #271e25;
	text-align: left;
	transition: 0.5s all ease;
}
.bar-box {
	position: relative;
	width: 100%;
	height: 6px;
	background-color: rgb(0 0 0 / 25%);
	border-radius: 6px;
	&::before,
	&::after {
		position: absolute;
		z-index: 10;
		box-sizing: border-box;
		display: block;
		width: 20%;
		height: inherit;
		content: '';
		background-color: transparent;
		border-color: #ffffff;
		border-style: solid;
		border-width: 0 5px;
	}
	&::before {
		left: 20%;
	}
	&::after {
		right: 20%;
	}
}
.bar {
	position: absolute;
	height: 6px;
	background: red;
	border-radius: 6px;
	transition: 0.5s all ease;
}
</style>
